<template>
  <el-card style="position: relative;left: 350px;width: 500px;margin-top: 50px;">
    <div slot="header" class="clearfix">
    <span>修改密码</span>
  </div>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名：" prop="names">
      <el-input  v-model="form.names"></el-input>
    </el-form-item>
    <el-form-item label="旧密码" prop="oldpass">
      <el-input type="password"  v-model="form.oldpass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newPass">
      <el-input type="password"  v-model="form.newpass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="newPass2">
      <el-input type="password"  v-model="form.newpass2" autocomplete="off"></el-input>
    </el-form-item>
    <el-button
      type="primary"
      @click="changePass"
      style="width: 150px; margin-left: 150px"
      >修改密码</el-button
    >
  </el-form>
</el-card>
</template>

<script>
export default {
  data() {
    return {
      form:{
        names:'',
        oldpass:'',
        newpass:'',
        newpass2:''
      }
    };
  },
  methods: {
    changePass() {
      let users = {
        uname: this.form.names,
        oldpass: this.form.oldpass,
        newpass:this.form.newpass
      };
      this.axios({
        url: "http://localhost:3000/users/updateupass",
        method: "POST",
        data: users,
      })
        .then((res) => {
          // 请求成功时，处理返回的数据
// console.log();
          // console.log(res.data);
          alert('密码修改成功')
        })
        .catch((error) => {
          // 请求失败时，处理错误
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>

.el-form-item label {
  color: #000000;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-button--primary {
  background-color: rgb(0, 0, 0);
  border-color: rgb(0, 0, 0);
}

.el-button--primary:hover {
  border-color: rgb(89, 88, 87);
  background-color: rgb(89, 88, 87);
  color: white;
}

/* .el-input {
  width: 40%;
} */
</style>